<template>
    <app-container>
        <app-block is-search>
            <zm-form inline :model="form" ref="searchForm" size="small">
                <zm-form-item prop="name">
                    <el-input v-model="form.name" class="w150" clearable placeholder="请输入部门名称" />
                </zm-form-item>
                <zm-form-item prop="status">
                    <zm-data-select v-model="form.status" :list="STATUS_TYPE" class="w150" placeholder="请选择部门状态" />
                </zm-form-item>
                <zm-form-item>
                    <zm-button t="search" @click="onSearch" />
                    <zm-button t="reset" @click="onReset" />
                    <!-- <zm-button type="warning" @click="onExport">导出</zm-button> -->
                    <zm-button @click="onNew" t="add" />
                </zm-form-item>
            </zm-form>
        </app-block>
        <app-block>
            <div class="box-flex">
                <div class="company mr10">
                  <div class="bb pb5 mb10">公司</div>
                  <div class="list">
                    <div class="ell list-item" :class="{'list-item_active':activeIndex===index}" @click="companySelect(item,index)" v-for="(item,index) in companyList" :key="index">{{ item.companyName }}</div>
                  </div>
                </div>
                <zm-table-data v-if="companyList.length>0" :data="tableParams.data" :columns="columns" :fetch="loadList" :table-params="tableParams" row-key="id" :tree-props="{ children: 'children' }" class="department-table">
                    <zm-table-column prop="name" label="部门名称" align="left" fixed="left" min-width="120"></zm-table-column>
                </zm-table-data>
            </div>
        </app-block>
        <update-department :company-list="companyList" v-if="updateVisible" v-model="updateVisible" :row-info="rowInfo" @after-save="afterSave"></update-department>
        <export-selector v-if="exportParams.visible" v-model="exportParams.visible" :main-list="mainList" :api="exportApi" :export-params="form" :field-key="'fields'" />
    </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import UpdateDepartment from './components/UpdateDepartment'
import ExportSelector from '@/components/ExportSelector'
import { columns } from './const'
import { STATUS_TYPE } from '@/model/type'
import systemApartmentApis from '@/api/src/systemApartment'
import publicApis from '@/api/src/public'
export default {
  components: { UpdateDepartment, ExportSelector },
  mixins: [tableMixin],
  data () {
    const checkboxOptions = {
      isAllShow: true,
      checkboxClass: 'w150 mt10',
      isString: false
    }
    return {
      columns: columns(this),
      companyList: [],
      form: {
        name: '',
        status: '-1',
        companyId: '1' // 福建爱来电影网络科技有限公司 默认
      },
      STATUS_TYPE,
      updateVisible: false,
      rowInfo: {},
      detailVisible: false,
      detailInfo: {},
      exportParams: {
        visible: false
      },
      mainList: [],
      activeIndex: 0
    }
  },
  computed: {
    exportApi () {
      return systemApartmentApis.exportList
    }
  },
  watch: {},
  created () {
    this.getCompanyListFn()
  },
  methods: {
    async loadList () {
      console.log(this.companyList, 'companyList')
      if (this.companyList.length === 1) {
        console.log('==============')
        this.form.companyId = this.companyList[0].companyId
      }
      console.log(this.form)
      const res = await systemApartmentApis.getPageList(
        this.assignQuery(this.form)
      )
      this.initialTableData(res.list, res.count)
    },
    async getCompanyListFn() {
      this.companyList = await publicApis.getCompanyList()
    },
    onNew () {
      this.rowInfo = {}
      this.updateVisible = true
    },
    onEdit (row) {
      this.rowInfo = row
      this.updateVisible = true
    },
    afterSave () {
      this.loadList()
    },
    onSwitch (row) {
      let status = row.status === '1' ? '2' : '1'
      let text =
                row.status === '1'
                  ? '停用该部门如包含下级部门将一并停用，是否继续？'
                  : `是否确认将【${row.name}】恢复？`
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await systemApartmentApis.setStatus({ id: row.id, status: status })
        this.$message.success('操作成功!')
        this.loadList()
      })
    },
    onDelete (row) {
      this.$confirm('删除该部门如包含下级部门将同时删除，确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await systemApartmentApis.delete({ id: row.id })
        this.$message.success('删除成功!')
        this.loadList()
      })
    },
    async onExport () {
      const _res = await systemApartmentApis.getExportField()
      this.mainList = [
        {
          vals: [],
          list: _res,
          options: { ...this.checkboxOptions, allKey: '全部选中' }
        }
      ]
      this.exportParams.visible = true
    },
    onReset() {
      this.form.companyId = this.companyList.length === 1 ? this.companyList[0].companyId : '1'
      this.activeIndex = 0
      if (this.$refs.searchForm) {
        this.$refs.searchForm.resetFields()
        this.onSearch()
      }
    },
    companySelect(item, index) {
      this.activeIndex = index
      this.form.companyId = item.companyId
      this.onSearch()
    }
  }
}
</script>

<style lang="scss">
.company {
  min-width: 250px;
  .list{
    height: 90%;
    overflow-y: auto;
    box-sizing: border-box;
    &-item{
      cursor: pointer;
      margin-bottom: 5px;
      width: 100%;
      padding: 5px;
      box-sizing: border-box;
      &:hover{
        color: #409EFF;
        background: rgba($color: #409EFF, $alpha: 0.1);
      }
      &_active{
        color: #409EFF;
        background: rgba($color: #409EFF, $alpha: 0.1);
      }
    }
  }
}
.department-table {
  flex: 1;
  .column-content {
    display: inline-block !important;
  }
  .el-table__expand-icon {
    position: relative;
    top: -6px;
  }
}
</style>
